<template>
  <div class="safe">
    <van-nav-bar title="安全中心" left-arrow @click-left="back" />
    <div class="cell-box">
      <van-cell title="修改密码" is-link @click="showPopup" />
      <van-cell title="注销账号" is-link @click="destroyAccount" />
    </div>

    <van-popup v-model="isPopup" position="bottom">
      <van-nav-bar left-text="修改密码" @click-right="onClickRight" style="background:#fff">
        <template #left>
          <span style="color:#666">修改密码</span>
        </template>
        <template #right>
          <van-icon name="cross" size="18" color="#c8c9cc" />
        </template>
      </van-nav-bar>
      <div class="form">
        <van-field label="旧密码" v-model="oldPassword" :type="isOld ? 'text':'password'" @click-right-icon="taggleOld" :right-icon="isOld ? 'eye-o' : 'closed-eye'" placeholder="输入密码" />
        <van-field label="新密码" v-model="newPassword" :type="isNew ? 'text':'password'" @click-right-icon="taggleNew" :right-icon="isNew ? 'eye-o' : 'closed-eye'" placeholder="输入密码" />
        <div style="margin: 20px">
          <van-button @click="updatePassword" type="default" color="#1989fa" round block>提交</van-button>
        </div>
      </div>
    </van-popup>

    <!-- 退出登录 -->
    <div class="exit-btn">
      <van-button type="primary" round color="#307dd5" block @click="outLogin"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import "../assets/less/safe.less";
import {utils} from '../assets/js/utils';
export default {
  name: "Safe",
  data() {
    return {
      isPopup: false,
      isOld: false,
      isNew: false,
      oldPassword: '',
      newPassword: '',
    }
  },
  methods: {
    back() {
      this.$router.back();
    },

    taggleOld() {
      this.isOld = !this.isOld;
    },

    taggleNew() {
      this.isNew = !this.isNew;
    },

    showPopup() {
      this.isPopup = true;
    },

    onClickRight() {
      this.isPopup = false;
    },

    // 修改密码
    updatePassword() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      let obj = {
        oldPassword: {
          value: this.oldPassword,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: '密码为字母开头,支持英文数字_组合'
        },
        newPassword: {
          value: this.newPassword,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: '密码为字母开头,支持英文数字_组合'
        },
      }

      if (!utils.vaildForm(obj)) {
        return;
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/updatePassword",
        data: {
          appkey: this.appkey,
          tokenString,
          password: this.newPassword,
          oldPassword: this.oldPassword
        },
      })
        .then((response) => {
          this.$toast.clear();
          console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code === "E001") {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },

    // 注销账号
    destroyAccount() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/destroyAccount",
        data: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((response) => {
          this.$toast.clear();
          console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });

            this.$router.push({ name: "Login" });
          }

          if (response.data.code == "G001") {
            this.$router.push({ name: "Login" });
          }

          this.$toast({
            message: response.data.msg,
            forbidClick: true,
            duration: 1000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },

    // 退出登录
    outLogin() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseURL + "/logout",
        data: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((response) => {
          this.$toast.clear();
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code === "F001") {
            this.$router.push({ name: "Login" });
          }
          this.$toast({
            message: response.data.msg,
            forbidClick: true,
            duration: 1000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },
  },
};
</script>
